<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>

<!-- sendMobileMessageModal -->
<th:block th:fragment="send_mobile_mmessage">
    <div class="modal fade" id="sendMobileMessageModal" tabindex="-1" role="dialog" aria-labelledby="sendMobileMessageLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="mobileMessageForm" th:action="@{/api/mobile_message}" method="POST">
                    <div class="modal-header">
                        <h5 class="modal-title" id="sendMobileMessageLabel"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="sr-only" for="mobileCaptcha" th:text="#{captcha}"></label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="mobileCaptcha" name="captcha" th:placeholder="#{captcha}" autocomplete="off" required th:title="#{enterCaptcha}" th:data-msg-remote="#{incorrectCaptcha}">
                                <div class="input-group-append">
                                    <img id="mobileCaptchaImg" class="input-group-text" style="cursor:pointer;padding:0;" onclick="fetchMobileCaptcha()" th:title="#{clickToRetrieveCaptcha}"
                                         src="">
                                    <input type="hidden" id="mobileCaptchaToken" name="captchaToken">
                                    <script th:inline="javascript">
                                        function fetchMobileCaptcha() {
                                            request(/*[[@{/api/captcha}]]*/'', {}).then(function (data) {
                                                if (data === null) return;
                                                $('#mobileCaptchaImg').attr('src', 'data:image/png;base64,' + data.base64);
                                                $('#mobileCaptchaToken').val(data.token);
                                            });
                                        }
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="mobileReceiver" name="mobile"/>
                        <input type="hidden" id="mobileUsage" name="usage"/>
                        <!--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
                        <button type="submit" class="btn btn-primary" th:text="#{obtainMobileMessage}"></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script th:inline="javascript">
        var defaultMobileTime = 90;
        var mobileTime = defaultMobileTime, mobileInput, mobileButton, mobileName, mobileInterval;

        function mobileMessageButtonControl() {
            if (mobileTime > 0) {
                mobileButton.text(mobileName + ' (' + mobileTime-- + ')').prop('disabled', true);
            } else {
                mobileButton.text(mobileName).prop('disabled', false);
                mobileTime = defaultMobileTime;
                clearInterval(mobileInterval);
            }
        }

        function sendMobileMessage(formValidator, element, input, button, usage) {
            if (formValidator.element(element)) {
                mobileInput = input;
                mobileButton = button;
                mobileName = button.text();
                $('#sendMobileMessageModal').modal('show');
                $('#mobileCaptcha').val('');
                $('#mobileCaptchaImg').click();
                $('#mobileReceiver').val(element.val());
                $('#mobileUsage').val(usage);
                setTimeout(function () {
                    $('#mobileCaptcha').focus().select();
                }, 500);
            } else {
                element.focus().select();
            }
        }

        $('#mobileMessageForm').validate({
            rules: {
                captcha: {
                    remote: {
                        url: /*[[@{/api/try_captcha}]]*/'', data: {
                            token: function () {
                                return $('#mobileCaptchaToken').val();
                            }
                        }
                    }
                }
            },
            submitHandler: function (form) {
                request(form.action, {method: form.method, body: $(form).serializeJSON()}).then(function (data) {
                    if (data === null) return;
                    mobileInput.val(data);
                    $('#sendMobileMessageModal').modal('hide');
                    clearInterval(mobileInterval);
                    mobileMessageButtonControl();
                    mobileInterval = setInterval(mobileMessageButtonControl, 1000);
                });
            }
        });
    </script>
</th:block>

<!-- sendEmailMessageModal -->
<th:block th:fragment="send_email_mmessage">
    <div class="modal fade" id="sendEmailMessageModal" tabindex="-1" role="dialog" aria-labelledby="sendEmailMessageLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="emailMessageForm" th:action="@{/api/email_message}" method="POST">
                    <div class="modal-header">
                        <h5 class="modal-title" id="sendEmailMessageLabel"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="sr-only" for="emailCaptcha" th:text="#{captcha}"></label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="emailCaptcha" name="captcha" onfocus="fetchEmailCaptcha()" th:placeholder="#{captcha}" autocomplete="off" required th:title="#{enterCaptcha}"
                                       th:data-msg-remote="#{incorrectCaptcha}">
                                <div class="input-group-append">
                                    <img id="emailCaptchaImg" class="input-group-text" style="cursor:pointer;padding:0;" onclick="fetchEmailCaptcha()" th:title="#{clickToRetrieveCaptcha}"
                                         src="">
                                    <input type="hidden" id="emailCaptchaToken" name="captchaToken">
                                    <script th:inline="javascript">
                                        function fetchEmailCaptcha() {
                                            request(/*[[@{/api/captcha}]]*/'', {}).then(function (data) {
                                                if (data === null) return;
                                                $('#emailCaptchaImg').attr('src', 'data:image/png;base64,' + data.base64);
                                                $('#emailCaptchaToken').val(data.token);
                                            });
                                        }
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="emailReceiver" name="email"/>
                        <input type="hidden" id="emailUsage" name="usage"/>
                        <!--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
                        <button type="submit" class="btn btn-primary" th:text="#{obtainEmailMessage}"></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script th:inline="javascript">
        var defaultEmailTime = 90;
        var emailTime = defaultEmailTime, emailInput, emailButton, emailName, emailInterval;

        function emailMessageButtonControl() {
            if (emailTime > 0) {
                emailButton.text(emailName + ' (' + emailTime-- + ')').prop('disabled', true);
            } else {
                emailButton.text(emailName).prop('disabled', false);
                emailTime = defaultEmailTime;
                clearInterval(emailInterval);
            }
        }

        function sendEmailMessage(formValidator, element, input, button, usage) {
            if (formValidator.element(element)) {
                emailInput = input;
                emailButton = button;
                emailName = button.text();
                $('#sendEmailMessageModal').modal('show');
                $('#emailCaptcha').val('');
                $('#emailCaptchaImg').click();
                $('#emailReceiver').val(element.val());
                $('#emailUsage').val(usage);
                setTimeout(function () {
                    $('#emailCaptcha').focus().select();
                }, 500);
            } else {
                element.focus().select();
            }
        }

        $('#emailMessageForm').validate({
            rules: {
                captcha: {
                    remote: {
                        url: /*[[@{/api/try_captcha}]]*/'', data: {
                            token: function () {
                                return $('#emailCaptchaToken').val();
                            }
                        }
                    }
                }
            },
            submitHandler: function (form) {
                request(form.action, {method: form.method, body: $(form).serializeJSON()}).then(function (data) {
                    if (data === null) return;
                    emailInput.val(data);
                    $('#sendEmailMessageModal').modal('hide');
                    clearInterval(emailInterval);
                    emailMessageButtonControl();
                    emailInterval = setInterval(emailMessageButtonControl, 1000);
                });
            }
        });
    </script>
</th:block>

</body>
</html>